<template>
  <div style="position: relative;"> 
    <mt-header fixed title="岳麓区俱乐部">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
      <mt-button slot="right" v-show="isJoin" @click='addClub'>申请加入</mt-button> 
    </mt-header>
    <div style="height:40px;"></div>
    <div class="my-field" style="margin-top: 0;">
      <div class="my-field-img">
        <img src="@/assets/img/club.jpg" /> 
        <div v-if="editName"><input type="text" class="edit-box" value="岳麓区俱乐部" name=""><i @click="editName = false" class="fa fa-check blue ml10"></i><i @click="editName = false" class="fa fa-remove blue ml10"></i></div>    
        <div v-else><span>岳麓区俱乐部</span><i v-show="editAble" @click="editName = true" class="fa fa-pencil blue ml10"></i></div>
      </div>
    </div>
    <i ref="anchor"></i>
    <div ref="navbar" :class="{'navbar-fixed':navbarFixed}">
      <mt-navbar class="navbar-normal" v-model="selected">
        <mt-tab-item id="1">简介</mt-tab-item>
        <mt-tab-item id="2">成员</mt-tab-item>
        <mt-tab-item id="3">比赛</mt-tab-item>
        <mt-tab-item id="4" v-show="editAble">加群申请</mt-tab-item>
      </mt-navbar>
    </div>
    <div ref="block" v-show="navbarFixed"></div>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1"> 
        <div class="my-field">
          <div class="my-field-item">
            <span class="my-field-item-l gray">创建人</span>
            <span class="my-field-item-r">独孤求败</span> 
          </div> 
          <!-- <div class="my-field-item">
            <span class="my-field-item-l gray">积分</span>
            <span class="my-field-item-r">2000</span> 
          </div>
          <div class="my-field-item">
            <span class="my-field-item-l gray">排名</span>
            <span class="my-field-item-r">55</span> 
          </div>
          <div class="my-field-item">
            <span class="my-field-item-l gray">常驻球馆</span>
            <span class="my-field-item-r">岳麓区俱乐部</span> 
          </div>
           -->
          <div class="my-field-item">
            <span class="my-field-item-l gray">会员数</span>
            <span class="my-field-item-r">120</span> 
          </div>
          
          <div class="my-field-item">
            <div class="my-field-item-l gray">地址</div>
            <div class="my-field-item-r" style="flex:3;"> 
              <div v-if="editAddress" style="display:flex; align-items:center;"><input type="text" style="flex:1" class="edit-box" value="湖南省长沙市岳麓区" name=""><i @click="editAddress = false" class="fa fa-check blue ml10"></i><i @click="editAddress = false" class="fa fa-remove blue ml10"></i></div>    
              <div v-else style="display: flex; align-items:center;"><div style="flex:1; text-align:left;"><div class="fr">湖南省长沙市岳麓区</div></div><i v-show="editAble" @click="editAddress = true" class="fa fa-pencil blue ml10"></i></div>
            </div> 
          </div>
          <div class="my-field-item">
            <div class="my-field-item-l gray">介绍</div>
            <div class="my-field-item-r" style="flex: 3;">
              <div v-if="editInfo" style="display:flex; align-items:center;"><textarea style="flex:1; line-height: 25px;" rows="4" class="edit-box">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简</textarea><i @click="editInfo = false" class="fa fa-check blue ml10"></i><i @click="editInfo = false" class="fa fa-remove blue ml10"></i></div>    
              <div v-else style="display: flex; align-items: center;"><div style="flex:1; text-align:left;"><div class="fr">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介 </div></div><i v-show="editAble" @click="editInfo = true" class="fa fa-pencil blue ml10"></i></div>
            </div>
          </div>
        </div>
      </mt-tab-container-item>

      <mt-tab-container-item id="2">        
        <ul class="member-list" v-infinite-scroll="getMemberList">
          <li v-for="(item, index) in memberList">
            <div @click="$router.push('/member/' + item.id)" class="member-list-c">
              <div class="member-list-l"><img src="@/assets/img/head/male-1.png"></div>
              <div class="member-list-r">
                <h3>{{item.name}}</h3>
                <p class="gray6">等级：{{item.grade}}</p>
                <p class="gray6">排名：{{item.rank}}</p>
                <p class="gray6">积分：{{item.score}}</p>
              </div>
            </div>
            <div class="mr10" v-show="editAble">
              <mt-button type="danger" plain size="small" @click="removeMember(item.id,item.name)" style="padding: 0 7px">踢出俱乐部</mt-button> 
            </div> 
          </li>
        </ul>
        <div class="loading-center" v-show="memberHasMore"><mt-spinner :size="20" :type="3"></mt-spinner>加载中…</div>
        <div class="no-more" v-show="!memberHasMore">没有更多…</div>
      </mt-tab-container-item>

      <mt-tab-container-item id="3">
        <ul class="match-list" v-infinite-scroll="getMatchList">
          <li v-for="(item, index) in matchList" @click="toDetails(item.id,item.type)" >
            <div class="match-item-img">
              <img v-show="parseInt(index%4) == 0" src="@/assets/img/match/1.jpg" >
              <img v-show="parseInt(index%4) == 1" src="@/assets/img/match/2.jpg" >
              <img v-show="parseInt(index%4) == 2" src="@/assets/img/match/3.jpg" >
              <div v-show="parseInt(index%4) == 3" style="height:30px;"></div>
              <div :class="[getTypeClass(item.type)]">{{ getTypeName(item.type) }}</div>
            </div> 
            <div class="match-item-title"><i class="match-step" v-text='getStepTxt(item.step)'></i> {{item.title}} </div>
            <div class="match-item-con">
              <span class="match-item-t"><i class="fa fa-clock-o"></i>比赛时间</span>
              <span class="match-item-c">{{item.sTime}} 至 {{item.eTime}}</span>
            </div>
            <div class="match-item-con">
              <span class="match-item-t"><i class="fa fa-hourglass-end"></i>报名截止</span>
              <span class="match-item-c">{{ item.deadline}}</span>
            </div>
            <div class="match-item-con">
              <span class="match-item-t"><i class="fa fa-map-marker"></i>比赛地址</span>
              <span class="match-item-c">{{item.address}}</span>
            </div> 
          </li>
        </ul> 
        <div class="loading-center" v-show="matchHasMore"><mt-spinner :size="20" :type="3"></mt-spinner>加载中…</div>
        <div class="no-more" v-show="!matchHasMore">没有更多…</div>        
      </mt-tab-container-item>

      <mt-tab-container-item id="4" v-show="editAble">
        <ul class="message-list">
          <li v-for="(item,index) in messageList">
            <div class="message-item-in"> 
              <div class="message-item-c"> 
                <p class="mt10 f14">{{item.text}}</p>
              </div>
              <div class="">
                <mt-button type="primary" size="small" class="mr5" plain @click="">通过</mt-button>
                <mt-button type="danger" size="small" plain @click="removeMsgItem(item.id)">删除</mt-button>
              </div>
            </div>
          </li>
        </ul>   
      </mt-tab-container-item>

    </mt-tab-container>

    <mt-popup v-model="popupVisible" style="width: 90%;">
      <div style="margin:20px;">
        <h4 class="tc f16 mb20">2019长沙岳麓区第N届羽毛球邀请赛</h4>
        <mt-button size="large" type="primary" @click="$router.push('/match/'+currId+'?type=1')" style="margin-bottom:20px;">单项赛</mt-button>
        <mt-button size="large" type="danger"  @click="$router.push('/match/'+currId+'?type=2')" >团体赛</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
var stepObj = {
1:"报名中",
2:"报名结束",
3:"比赛中",
4:"比赛结束"
};

export default { 
  data () {
    return {
      editAble:true,
      isJoin:false, 
      editName:false,
      editAddress:false,
      editInfo:false, 
      clubId:this.$route.params.id,
      selected:"1",
      popupVisible:false,
      navbarFixed:false,
      isLoading:false,
      memberList:[],
      memberPage:1,
      memberHasMore:true,
      matchList:[],
      matchPage:1,
      matchHasMore:true ,
      messageList:[
        {
          id:"1", 
          text:"张无忌申请加入您的俱乐部！"
        },
        {
          id:"2", 
          text:"张无忌申请加入您的俱乐部！"
        }
      ]
    }
  },
  mounted(){
    this.$refs.block.style.height = this.$refs.navbar.offsetHeight + 'px';
    window.addEventListener('scroll', this.handleScroll); 
    this.getClubDetails();
  },
  methods:{
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var t = this.$refs.anchor.offsetTop;
      if(scrollTop >= t - 40){
        this.navbarFixed = true;
      }else{
        this.navbarFixed = false;
      }
    }, 
    removeMsgItem(id){
      this.$messagebox.confirm('<i style="color:#000;">您确定删除该信息吗？</i>',null).then(action => {
        if(action == 'confirm'){
          this.$toast('删除成功！');
        }
      });
    },
    getClubDetails(){  //获取俱乐部详情

    },
    getMemberList(){   
      this.memberHasMore = false;   
      this.memberList = [
            { 
              "id":1,
              "imgUrl":"male-1.png",
              "grade":"平民",
              "name":"独孤求败",
              "rank":"1",
              "score":"500"
            },
            { 
              "id":2,
              "imgUrl":"male-2.png",
              "grade":"平民",
              "name":"血刀老祖", 
              "rank":"2",
              "score":"500"
            },
            { 
              "id":3,
              "imgUrl":"male-3.png",
              "grade":"平民",
              "name":"桃花岛主", 
              "rank":"3",
              "score":"520"
            },
            { 
              "id":4,
              "imgUrl":"male-4.png",
              "grade":"平民",
              "name":"南院大王", 
              "rank":"4",
              "score":"500"
            },
            { 
              "id":5,
              "imgUrl":"male-5.png",
              "grade":"平民",
              "name":"东方不败", 
              "rank":"5",
              "score":"500"
            },
            { 
              "id":6,
              "imgUrl":"female-1.png",
              "grade":"平民",
              "name":"灭绝师太", 
              "rank":"6",
              "score":"500"
            },
            { 
              "id":7,
              "imgUrl":"female-2.png",
              "grade":"平民",
              "name":"移花宫主", 
              "rank":"7",
              "score":"500"
            },
            { 
              "id":8,
              "imgUrl":"female-3.png",
              "grade":"平民",
              "name":"天山童姥", 
              "rank":"8",
              "score":"500"
            },
            { 
              "id":9,
              "imgUrl":"female-4.png",
              "grade":"平民",
              "name":"五毒教主",
              "rank":"9", 
              "score":"500"
            },
            { 
              "id":10,
              "imgUrl":"female-5.png",
              "grade":"平民",
              "name":"赤练仙子", 
              "rank":"10",
              "score":"500"
            }
          ];

          
      /*if(this.selected == "2") {
        if(this.isLoading) return;
        if(this.memberHasMore == false) return;
        this.isLoading = true;
        setTimeout(()=>{
          this.axios.get(this._site + 'member/list', {
            params: { page: this.memberPage }          
          }).then(response => {          
            var res = response.data;
            if(res.status == 1){
              this.memberList = this.memberList.concat(res.data);
              if(this.memberList.length >= 30){ 
                this.memberHasMore = false;
              }else{
                this.memberPage++;
              }
            }else{
              this.$toast('加载失败');
            }
            this.isLoading = false;
          }).catch(error => { 
            this.$toast('加载异常');          
            this.isLoading = false;
          });
        },500)
      }*/
    },
    getMatchList(){
      this.matchHasMore = false;
      this.matchList = [
        {
          "id":1,
          "imgUrl":"",
          "title":"2019长沙岳麓区第N届羽毛球邀请赛",
          "type":1,
          "sTime":"2019-07-01",
          "eTime":"2019-07-08",
          "deadline":"2019-06-31",
          "step":1,
          "cost":100,
          "address":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":2,
          "imgUrl":"",
          "title":"2019长沙岳麓区第N届羽毛球邀请赛",
          "type":2,
          "sTime":"2019-07-01",
          "eTime":"2019-07-08",
          "deadline":"2019-06-31",
          "step":2,
          "cost":100,
          "address":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":3,
          "imgUrl":"",
          "title":"2019长沙岳麓区第N届羽毛球邀请赛",
          "type":3,
          "sTime":"2019-07-01",
          "eTime":"2019-07-08",
          "deadline":"2019-06-31",
          "step":3,
          "cost":100,
          "address":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":4,
          "imgUrl":"",
          "title":"2019长沙岳麓区第N届羽毛球邀请赛",
          "type":1,
          "sTime":"2019-07-01",
          "eTime":"2019-07-08",
          "deadline":"2019-06-31",
          "step":4,
          "cost":100,
          "address":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":5,
          "imgUrl":"",
          "title":"2019长沙岳麓区第N届羽毛球邀请赛",
          "type":1,
          "sTime":"2019-07-01",
          "eTime":"2019-07-08",
          "deadline":"2019-06-31",
          "step":3,
          "cost":100,
          "address":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":6,
          "imgUrl":"",
          "title":"2019长沙岳麓区第N届羽毛球邀请赛",
          "type":2,
          "sTime":"2019-07-01",
          "eTime":"2019-07-08",
          "deadline":"2019-06-31",
          "step":1,
          "cost":100,
          "address":"湖南省长沙市岳麓区体育馆"
        }
      ];

      /*if(this.selected == "3") {
        if(this.isLoading) return;
        if(this.matchHasMore == false) return;
        this.isLoading = true;
        setTimeout(()=>{
          this.axios.get(this._site + 'list', {
            params: { page: this.matchPage }          
          }).then(response => {          
            var res = response.data;
            if(res.status == 1){
              this.matchList = this.matchList.concat(res.data);
              if(this.matchList.length >= 30){ 
                this.matchHasMore = false;
              }else{
                this.matchPage++;
              }
            }else{
              this.$toast('加载失败');
            }
            this.isLoading = false;
          }).catch(error => { 
            this.$toast('加载异常');          
            this.isLoading = false;
          });
        },500)
      }*/
    },
    addClub(){
      this.$messagebox.confirm('<i style="color:#000;">您确定加入该俱乐部？</i>',null).then(action => {
        if(action == 'confirm'){
          this.$toast('申请俱加入乐部成功,请等待审核！');
        }
      });
    },
    removeMember(id,name){
      this.$messagebox.confirm('<i style="color:#000;">您确定将“'+ name +'”踢出俱乐部吗？</i>',null).then(action => {
        if(action == 'confirm'){
          this.$toast(name +'已经被你踢出俱乐部了！');
        }
      });
    },
    getStepTxt(id){
      return stepObj[id];
    },    
    getTypeClass(t){
      var s;
      if(t == 1) s = "match-type-1";
      else if(t == 2) s = "match-type-2";
      else s = "match-type-3";
      return s;
    },
    getTypeName(t){
      var s;
      if(t == 1) s = "单项赛";
      else if(t == 2) s = "团体赛";
      else s = "混合赛";
      return s;
    },
    toDetails(id,type){
      if(type == 3){
        this.currId = id;
        this.popupVisible = true; 
      }
      else this.$router.push('/match/'+id + "?type=" + type);
    }
  },
  watch:{
    selected:function(val,oldVal){
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      if(val == '2'){
        this.memberList = [];
        this.memberPage = 1;
        this.memberHasMore = true;
        this.getMemberList();
      }else if(val == '3'){        
        this.matchList = [];
        this.matchPage = 1;
        this.matchHasMore = true;
        this.getMatchList();
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style type="text/css">
  .navbar-fixed{ position: fixed; z-index: 10; width: 100%; top:40px; background: #f0f0f0; }
  .edit-box{ border:1px solid #ccc; padding:5px; outline: 0; }
</style>